<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="30%" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']">
        <el-tree
            :load="loadNode"
            lazy
            :data="treeData"
            show-checkbox
            node-key="organ_pk"
            ref="authTree"
           :check-strictly="true"
            @check-change="handleNodeClick"
            @check="handleCheckChangeArea"
            @node-click="handleTreeClike"
            :props="defaultProps">
        </el-tree>

      </el-menu>
    </el-aside>

    <el-container>
      <el-main>
        <el-tabs v-model="activeName"  :before-leave="beforeLeave"  style="height: 100%">
          <!--------------------------------新增页面----------------------------------------->
          <el-tab-pane label="添加机构" name="first">
            <el-form  ref="addForm"  :rules="rules"  :model="data" label-width="80px">
              <el-form-item label="上级机构" prop="organ_parent_1">
                <el-input  v-model="data.organ_parent_1" :disabled="true" placeholder="请勾选左侧的机构"  style="width:50%"></el-input>
              </el-form-item>
              <el-form-item label="所属系统"  prop="owner_sys">
                <el-select placeholder="请选择所属系统" v-model="data.owner_sys" @change="handleChange"   style="width:50%">
                      <el-option 
                        v-for="item in dics.xtlx" 
                        :key="item.dict_code" 
                        :label="item.dict_name" 
                        :value="item.dict_code">
                      </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="机构名称" prop="organ_name">
                <el-input v-model="data.organ_name" placeholder="请填写机构名称" style="width:50%"></el-input>
              </el-form-item>
              <el-form-item label="机构代码" prop="organ_code">
                <el-input  v-model="data.organ_code" placeholder="请填写机构代码" style="width:50%"></el-input>
              </el-form-item>
              <el-form-item label="机构简称" prop="organ_jc">
                <el-input  v-model="data.organ_jc" placeholder="请填写机构简称" style="width:50%"></el-input>
              </el-form-item>
              <el-form-item label="行政区划" prop="dict_code">
                <el-tree style="width:50%"
                    :data="treeXZQH"
                    show-checkbox
                    :load="loadXzqhNode"
                    lazy
                    node-key="dict_code"
                    ref="dictTree"
                    :check-strictly="true"
                    @check="handleCheckChangeXZQH"
                    :props="dictProps">
                </el-tree>
              </el-form-item>
              <el-form-item label="机构电话" prop="organ_phone">
                <el-input  v-model="data.organ_phone" placeholder="请填写机构电话"  style="width:50%"></el-input>
              </el-form-item>
              <el-form-item label="机构地址" prop="organ_address">
                <el-input  v-model="data.organ_address" placeholder="请填写机构地址"  style="width:50%"></el-input>
              </el-form-item>
              <el-form-item label="状态" prop="organ_status">
                <input type="radio"  value="1" style="margin-left:20px" v-model="data.organ_status">
                <label for="qiy">启用</label>
                <input type="radio"  value="0" style="margin-left:50px" v-model="data.organ_status">
                <label for="jiny">禁用</label>
              </el-form-item>
            </el-form>
            <div style="margin-top: 2%;padding-left: 20%">
            <span slot="footer" class="dialog-footer">
                   <el-button type="primary" @click="save('addForm')">保 存</el-button>
                      <el-button @click="reset">重 置</el-button>
              </span>
            </div>
          </el-tab-pane>
          <!--------------------------------编辑页面----------------------------------------->
          <el-tab-pane label="机构信息" name="second">
            <el-form  ref="editForm"  :model="editData" :rules="rules"  label-width="80px">
              <el-row>
                <el-col>
                  <el-form-item label="所属系统" prop="owner_sys">
                    <el-select placeholder="请选择所系统" v-model="editData.owner_sys" @change="handleChange"   style="width:50%">
                      <!-- <el-option
                          v-for="item in xtlx"
                          :key="item.sys_type"
                          :label="item.sys_name"
                          :value="item.sys_type">
                      </el-option> -->
                      <el-option 
                        v-for="item in dics.xtlx" 
                        :key="item.dict_code" 
                        :label="item.dict_name" 
                        :value="item.dict_code">
                      </el-option>

                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="机构名称" prop="organ_name">
                <el-input v-model="editData.organ_name" placeholder="请填写机构名称"  style="width:50%"></el-input>
              </el-form-item>
              <el-form-item label="机构代码" prop="organ_code">
                <el-input  v-model="editData.organ_code"  placeholder="请填写机构代码"  style="width:50%"></el-input>
              </el-form-item>
              <el-form-item label="机构简称" prop="organ_jc">
                <el-input  v-model="editData.organ_jc" placeholder="请填写机构简称"  style="width:50%"></el-input>
              </el-form-item>
              <el-form-item label="行政区划">
                <el-tree style="width:50%"
                    :data="treeXZQH"
                    show-checkbox
                    :load="loadXzqhNodeEdit"
                    lazy
                    node-key="dict_code"
                    ref="dictTreeEdit"
                    :check-strictly="true"
                    @check="handleCheckChangeEditXZQH"
                    :props="dictProps">
                </el-tree>
              </el-form-item>
              <el-form-item label="机构电话">
                <el-input  v-model="editData.organ_phone" placeholder="请填写机构电话"  style="width:50%"></el-input>                                </el-form-item>
              <el-form-item label="机构地址">
                <el-input  v-model="editData.organ_address" placeholder="请填写机构地址"  style="width:50%"></el-input>
              </el-form-item>
              <el-form-item label="状态" prop="organ_status">
                <input type="radio" id="qiy" value="1" style="margin-left:20px" v-model="editData.organ_status">
                <label for="qiy">启用</label>
                <input type="radio" id="jiny" value="0" style="margin-left:50px" v-model="editData.organ_status">
                <label for="jiny">禁用</label>
              </el-form-item>
            </el-form>
            <div style="margin-top: 2%;padding-left: 20%">
             <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="edit('editForm')">保 存</el-button>
                  <el-button @click="dele">删 除</el-button>
              </span>
            </div>
          </el-tab-pane>

        </el-tabs>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
import ElFormItem from "../../../../../node_modules/element-ui/packages/form/src/form-item";
export default {
  components: {ElFormItem},
  name: "edit",
  props: {
    titleName: {
      type: String,
      default: '新增'
    },
    Visible: {
      type:Boolean
    }
  },
  data(){
    return {
      dics: {},
      defaultProps: {
        children: 'children',
        label: 'organ_name'
      },
      dictProps:{
        children: 'children',
        label: 'dict_name'
      },
      activeName: 'first',
      node_zero: '', // 将node.level == 0的node存起来
      resolve_zero: '', // 将node.level == 0的resolve存起来
      node_add_xzqh: '', // 将node.level == 0的node存起来
      resolve_add_xzqh: '', // 将node.level == 0的resolve存起来
      node_edit_xzqh: '', // 将node.level == 0的node存起来
      resolve_edit_xzqh: '', // 将node.level == 0的resolve存起来
      treeData:[],
      treeXZQH:[],
      xtlx:[],
      xzqh:[],
      tree_url:'/auth/organ/tree_organ_list',
      tree_lazy_url:'/auth/organ/tree_organ_lazy_list',
      //查询行政区划
      url_lazy_xzqh: '/auth/dict/get_organ_lazy',
      url_save:'/auth/organ/save',
      url_edit:'/auth/organ/update',
      url_delete:'/auth/organ/delete',
      data:{
        organ_pk: '',
        owner_sys: '',
        organ_name: '',
        organ_code: '',
        organ_jc: '',
        organ_qhdm: '',
        organ_qhmc: '',
        organ_parent: '',
        organ_parent_1: '',
        organ_phone: '',
        organ_address: '',
        aae037: '',
        organ_status: '1',
      },
      editData:{
        organ_pk: '',
        owner_sys: '',
        organ_name: '',
        organ_code: '',
        organ_jc: '',
        organ_qhdm: '',
        organ_qhmc: '',
        organ_parent: '',
        organ_parent_1: '',
        organ_phone: '',
        organ_address: '',
        aae037: '',
        organ_status: '1',
      },
      xzqhData:{
        dict_pk:'',
        dict_code:'',
        dict_name:'',
        dict_parent:'',
      },
      rules: {
        // 要以数组形式展示
        owner_sys: [
          {required: true, message: ' ', trigger: 'change'}
        ],
        organ_name: [
          {required: true, message: ' ', trigger: 'change'}
        ],
        organ_jc: [
          {required: true, message: ' ', trigger: 'change'}
        ],
        organ_code: [
          {required: true, message: ' ', trigger: 'change'}
        ],
        organ_status: [
          {required: true, message: ' ', trigger: 'change'}
        ],
        organ_parent_1: [
          {required: true, message: ' ', trigger: 'change'}
        ],
      },
    }
  },
  //初始化
  created() {
    // this.getData();
    // this.getXZQH(); //行政区划
    this.fetchTemplateData();  //所属系统
  },
  methods: {
    //当机构复选框被点击的时候触发
    handleCheckChangeArea(data){
        let labvalojb = data; //暂存选中节点
        this.$refs.authTree.setCheckedKeys([]); //删除所有选中节点
        this.$refs.authTree.setCheckedNodes([labvalojb]); //选中已选中节点

    },
    //当添加机构区划复选框被点击的时候触发
    handleCheckChangeXZQH(data){
      let labvalojb = data; //暂存选中节点
      this.$refs.dictTree.setCheckedKeys([]); //删除所有选中节点
      this.$refs.dictTree.setCheckedNodes([labvalojb]); //选中已选中节点
    },
    //当修改机构区划复选框被点击的时候触发
    handleCheckChangeEditXZQH(data){
      let labvalojb = data; //暂存选中节点
      this.$refs.dictTreeEdit.setCheckedKeys([]); //删除所有选中节点
      this.$refs.dictTreeEdit.setCheckedNodes([labvalojb]); //选中已选中节点
    },

    //点击机构树新增和编辑赋值
    handleNodeClick(data) {
      let organ_parent=this.$refs.authTree.getCheckedNodes();
      //新增
      this.data.organ_parent_1=organ_parent[0].organ_name;
      this.data.organ_parent=organ_parent[0].organ_pk;
      this.data.aae037=organ_parent[0].organ_code;
      //编辑
      this.editData.organ_pk=organ_parent[0].organ_pk;
      this.editData.organ_code=organ_parent[0].organ_code;
      this.editData.owner_sys=organ_parent[0].owner_sys;
      this.editData.organ_name=organ_parent[0].organ_name;
      this.editData.organ_jc=organ_parent[0].organ_jc;
      this.editData.organ_phone=organ_parent[0].organ_phone;
      this.editData.organ_address=organ_parent[0].organ_address;
      this.editData.organ_qhdm=organ_parent[0].organ_qhdm;
      this.editData.organ_qhmc=organ_parent[0].organ_qhmc;
      this.editData.organ_status=organ_parent[0].organ_status;
      this.editData.organ_parent=organ_parent[0].organ_parent;
      let selected = organ_parent[0].organ_qhdm.split(',');
      this.$refs.dictTreeEdit.setCheckedKeys(selected);
    },
    //点击树的时候触发
    handleTreeClike(data){
      let organ_parent=this.$refs.authTree.getCheckedNodes();
      if(organ_parent.length!=0){
        if(organ_parent[0].organ_pk==data.organ_pk){
          this.data.organ_parent_1='';
          this.editData={};
          this.activeName='first';
          this.$refs.authTree.setCheckedKeys([]); //删除所有选中节点
        }else{
          let labvalojb = data; //暂存选中节点
          this.$refs.authTree.setCheckedKeys([]); //删除所有选中节点
          this.$refs.authTree.setCheckedNodes([labvalojb]); //选中已选中节点
        }
      }else{
        let labvalojb = data; //暂存选中节点
        this.$refs.authTree.setCheckedKeys([]); //删除所有选中节点
        this.$refs.authTree.setCheckedNodes([labvalojb]); //选中已选中节点
      }
    },
    //获取下拉中的text值
    handleChange(val){
      let obj = {};
      obj = this.xtlx.find(function(item){
        return item.sys_type === val
      });
      this.data.sys_name=obj.sys_name;
    },
    //切换tabs 页 判断是否修改
    beforeLeave(value){
      let organ=this.$refs.authTree.getCheckedNodes();
      if(organ.length==0){
        if(value=='second'){
          this.$message({
            message: "请勾选左侧的机构信息",
          });
          return false;
        }
      }
    },


    //懒加载机构树
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.node_zero= node
        this.resolve_zero = resolve
        this.node_zero.childNodes = []
        this.data.organ_parent=0;
      }else{
        this.data.organ_parent=node.data.organ_pk;
      }
      this.$post(this.tree_lazy_url,this.data).then(res => {
        if(res){
          // let organ_pk=this.data.organ_parent;
          // this.treeData= res;
          return resolve(res);
          // if(organ_pk){
          //   if(sign=='add'){
          //     this.$refs.authTree.setCheckedKeys([organ_pk]); //选中已选中节点
          //   }
          // }

        }
      })
    },

    //懒加载行政区划（新增）
    loadXzqhNode(node, resolve) {
      if(node.level===0){
        this.xzqhData.dict_parent=0;
        this.node_add_xzqh= node
        this.resolve_add_xzqh = resolve
        this.node_add_xzqh.childNodes = []
      }else{
        this.xzqhData.dict_parent=node.data.dict_code;
      }
      this.$post(this.url_lazy_xzqh,this.xzqhData).then(res => {
        if(res){
          return resolve(res);
        }
      })
    },

    //懒加载行政区划（编辑）
    loadXzqhNodeEdit(node, resolve) {
      if(node.level===0){
        this.xzqhData.dict_parent=0;
        this.node_edit_xzqh= node
        this.resolve_edit_xzqh = resolve
        this.node_edit_xzqh.childNodes = []
      }else{
        this.xzqhData.dict_parent=node.data.dict_code;
      }
      this.$post(this.url_lazy_xzqh,this.xzqhData).then(res => {
        if(res){
          return resolve(res);
        }
      })
    },

    //保存
    save(addForm){
      this.$refs[addForm].validate(valid => {
            if (valid) {
              let dict=this.$refs.dictTree.getCheckedNodes();
              if(dict.length==0){
                this.$message({
                  type : 'error',
                  message: '请选择行政区划',
                });
              }else{
                this.data.organ_qhdm=dict[0].dict_code;
                this.data.organ_qhmc=dict[0].dict_name;
                this.$post(this.url_save, this.data).then(res => {
                  if(res.code=='success'){
                    this.$message({
                      type : res.code,
                      message: res.msg,
                    });
                    this.reset();
                    //重新加载机构树
                    this.loadNode(this.node_zero, this.resolve_zero );
                    //重新加载新增项的行政区划
                    this.loadXzqhNode(this.node_add_xzqh,this.resolve_add_xzqh);
                  }else{
                    this.$message({
                      type : res.code,
                      message: res.msg,
                    });
                  }
                })
              }
          }
      })
    },
    //编辑
    edit(editForm){
      this.$refs[editForm].validate(valid => {
        if(valid){
          let dict=this.$refs.dictTreeEdit.getCheckedNodes();
          if(dict.length==0){
            this.$message({
              type : 'error',
              message: '请选择行政区划',
            });
          }else{
            this.editData.organ_qhdm=dict[0].dict_code;
            this.editData.organ_qhmc=dict[0].dict_name;
            this.$post(this.url_edit, this.editData).then(res => {
              if(res.code=='success'){
                this.$message({
                  type : res.code,
                  message: res.msg,
                });
                this.data.organ_parent_1='';
                this.activeName='first';
                //重新加载机构树
                this.loadNode(this.node_zero, this.resolve_zero );
                //重新加载编辑项行政区划
                this.loadXzqhNodeEdit(this.node_edit_xzqh,this.resolve_edit_xzqh);
              }else{
                this.$message({
                  type : res.code,
                  message: res.msg,
                });
              }
            })
          }
        }
      })
    },
    //删除
    dele(){
      let organ_pk=this.editData.organ_pk;
      if(organ_pk){
        this.$confirm('确定要删除该机构信息？','提示',{
          confirmButtonText: '确定',cancleButtonText:'取消',type:'warning'
        }).then(()=>{
          this.$post(this.url_delete, {organ_pk:organ_pk}).then(res => {
            if(res.code=='success'){
              this.$message({
                type : res.code,
                message: res.msg,
              });
              this.activeName='first';
              this.data.organ_parent_1='';
              //重新加载机构树
              this.loadNode(this.node_zero, this.resolve_zero );
            }else{
              this.$message({
                type : res.code,
                message: res.msg,
              });
            }

          }).catch(() => {
            //重新加载机构树
            this.loadNode(this.node_zero, this.resolve_zero );
          });
        }).catch(() => {
          //重新加载机构树
          this.loadNode(this.node_zero, this.resolve_zero );
        });
      }else{
        this.$message({
          message: "请勾选左侧的机构后进行删除",
        });
      }
    },
    //重置
    reset(){
      for(var key in this.data){
        if(key!='organ_parent_1' && key !='organ_parent'){
          this.data[key]='';
        }
      }
      this.data.organ_status='1';
    },
    //系统了类型下拉菜单
    fetchTemplateData(){
        this.dics.xtlx = this.$getDict('XTLX');//系统类型
    },

  }
}
</script>

<style scoped>
@import "../../../../assets/css/common.css";
</style>

